<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Watchlist Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="//qsstage.morningstar.com/sdk/common/reset.css" type="text/css" rel="stylesheet"/>
    <link href="../../../common/common.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/tabmenu/tabmenu.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/selectbutton/selectbutton.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/dropdownlist/dropdownlist.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/scrollpanel/scrollpanel.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/dragdrop/dragdrop.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/datagrid/datagrid.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/customview/customview.css" type="text/css" rel="stylesheet"/>
    <link href="../../../widgets/watchlist/watchlist.css" type="text/css" rel="stylesheet"/>
    <link href="../../../theme/default/style.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
    .rtq-simpleWL{border: 1px solid #DDD;width: auto;}
    </style>
</head>
<body>
    <div class="sdk-customview-container"></div>
    <div class="sdk-watchlist-container"></div>
    <script type="text/javascript" src="../../../lib/jquery.js"></script>
    <script type="text/javascript" src="../../../lib/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="../../../lib/migratory-jslib.js"></script>
    <script type="text/javascript" src="../../../common/common.js"></script>
    <script type="text/javascript" src="../../../core/common.js"></script>
    <script type="text/javascript" src="../../../core/permissionChecker.js"></script>
    <script type="text/javascript" src="../../../core/SDKDataManager.js"></script>
    <script type="text/javascript" src="../../../core/tickers.js"></script>
    <script type="text/javascript" src="../../../core/dataHandler.js"></script>
    <script type="text/javascript" src="../../../core/pull.js"></script>
    <script type="text/javascript" src="../../../core/push.js"></script>
    <script type="text/javascript" src="../../../core/subscriber.js"></script>    
    <script type="text/javascript" src="../../../formatter/qs_formatter_en_us.js"></script>
    <script type="text/javascript" src="../../../theme/default/style.js"></script>
    <script type="text/javascript" src="../../../language/en_us/qs_text_en_us.js"></script>
    <script type="text/javascript" src="../../../ui/util/util.js"></script>
    <script type="text/javascript" src="../../../ui/selectbutton/selectbutton.js"></script>
    <script type="text/javascript" src="../../../ui/dropdownlist/dropdownlist.js"></script>
    <script type="text/javascript" src="../../../ui/dragdrop/dragdrop.js"></script>
    <script type="text/javascript" src="../../../ui/tabmenu/tabmenu.js"></script>
    <script type="text/javascript" src="../../../ui/scrollpanel/scrollpanel.js"></script>
    <script type="text/javascript" src="../../../ui/customview/customview.js"></script>
    <script type="text/javascript" src="../../../ui/datagrid/datagrid.js"></script>
    <script type="text/javascript" src="../../../ui/datagrid/multi_datagrid.js"></script>
    <script type="text/javascript" src="../../../language/en_us/qs_watchlist_en_us.js"></script>
    <script type="text/javascript" src="../../../widgets/watchlist/dataColumn.js"></script>
    <script type="text/javascript" src="../../../widgets/watchlist/summary.js"></script>
    <script type="text/javascript" src="../../../widgets/watchlist/watchlistDataManager.js"></script>
    <script type="text/javascript" src="../../../widgets/watchlist/tickerList.js"></script>
    <script type="text/javascript" src="../../../widgets/watchlist/simpleWatchlist.js"></script>
    <script type="text/javascript">
        var watchlistWidget=null;
        $(document.body).ready(function(){
            /*#############Demo Code###########################*/
            //init QSAPI
            QSAPI.init('DISN');
            //authentication
            QSAPI.Authentication.login("3385076F54485060427403D4CB3EDBF4B51A60E75510834F099A0A9AB1DE930BBFEFB3E1FB0737DD7F2D0D340124D21449EDCE45B1AD19162FB476BE0EAF47CB","62AE252A46399A992E5E581ACE458353C76F388C0B72B2A22E6A4D5077204D8E732AD3693025559AFA9FED3A3EF09354EA0DAA3F6EEE6158D98820232F345C1C",{
                onFailure:function(result){
                    document.write("login failed.");
                },
                onSuccess:function(result){
                    QSAPI.DataManager.connectToPull("http://qsstage.morningstar.com/pullservice/pull/getPullQuote.jsp",10000,{
                        onSuccess:function(){
                            //set customize columns by CustomView Object
                            GB_WLDM.setCustomColumns({
                                "cfactor":{
                                    "header": "Coefficient Factor",//header name
                                    "dataIndex": "cfactor",//data point code
                                    "isCustom": true,//it is necessary if this is customized
                                    "dataType": "float",//data type, only support string ,float, date
                                    "width": 100,//init width
                                    "align": "right",//support left, right, center
                                    "txt": "Coefficient Factor",
                                    "val": "cfactor"
                                },
                                "usercur":{
                                    "header": "UserCurrency",//header name
                                    "dataIndex": "usercur",//data point code
                                    "isCustom": true,//it is necessary if this is customized
                                    "dataType": "string",//data type, only support string ,float, date
                                    "width": 100,//init width
                                    "align": "right",//support left, right, center
                                    "txt": "UserCurrency",
                                    "val": "usercur"
                                },
                                "cust1":{
                                    "header": "CUST1",//header name
                                    "dataIndex": "cust1",//data point code
                                    "isCustom": true,//it is necessary if this is customized
                                    "dataType": "float",//data type, only support string ,float, date
                                    "width": 100,//init width
                                    "relatedField":["LastPrice"],
                                    "align": "right",//support left, right, center
                                    "calcMethod" :function(customData){
                                        return customData["LastPrice"];
                                    },
                                    "txt": "CUST1",
                                    "val": "cust1"
                                },
                                "MarketValue":{//cover
                                    "width":150,
                                    "beforeRender":function(customData,data){
                                        var userCur = customData["usercur"]||customData["defaultCurrency"];
                                        if(customData["defaultCurrency"]==userCur){
                                            return data;
                                        }else{
                                            var detail = GB_CURRENCY_DETAIL[userCur];
                                            return String.format("{0}{1}{2}",detail["shortName"],detail["symbol"],data);
                                        }
                                    }
                                },
                                "TC":{
                                    "header": "Total Cost",//header name
                                    "dataIndex": "TC",//data point code
                                    "isCustom": true,//it is necessary if this is customized
                                    "dataType": "float",//data type, only support string ,float, date
                                    "width": 120,//init width
                                    "txt": "Total Cost",
                                    "val": "TC",
                                    "calcMethod" :function(customData){
                                        //PurchasePrice,NumOfShares,Comm,cfactor
                                        return (customData["PurchasePrice"]*customData["NumOfShares"])*customData["cfactor"] + customData["Comm"];
                                    },
                                    "align": "right"//support left, right, center
                                }
                            });
                            //new test
                            GB_WLDM.setWatchlistData([
                                {
                                    "id":"1",
                                    "name":"Test-WL",
                                    "type":"wl",
                                    "data":["IBM"]
                                },
                                {
                                    "id":"2",
                                    "name":"Test-PL",
                                    "type":"pl",
                                    "config":{
                                        currency:GB_CURRENCY.CAN
                                    },
                                    "data":[{
                                        symbol:"IBM",
                                        PurchasePrice:12,
                                        NumOfShares:100,
                                        usercur:GB_CURRENCY.USD,
                                        Comm:40,
                                        cfactor:1.0003
                                    },{
                                        symbol:"127:10:TX20",
                                        PurchasePrice:12,
                                        NumOfShares:100,
                                        Comm:40,
                                        cfactor:1.0029
                                    },{
                                        symbol:"0P00001FL8",
                                        PurchasePrice:12,
                                        NumOfShares:100,
                                        Comm:40,
                                        cfactor:1.0202
                                    }]
                                }
                            ]);
                            //if the openedList don't include Mstar watchlist, you can invoke follow method
                            //GB_WLDM.setConfig({"includeMSWL":false});
                            watchlistWidget= new QSAPI.Widget.Watchlist($(".sdk-watchlist-container"),{
                                displayLayout:"list",
                                openedList:[1,2,GB_WL_MS.DOW],//[GB_WL_MS.DOW,GB_WL_MS.SP50,1,2],
                                viewKey : ['Symbol','Name','MarketValue','P/L','P/Lpc','usercur','cust1','PurchasePrice','NumOfShares','Comm'],
                                defaultWatchlist:1,//GB_WL_MS.DOW,
                                showTab:true,
                                showLayout:false,
                                showInvalid:true,
                                initwidth:1000,
                                initheight:300,

                                showSummary:true,
                                rowDragable: true,
                                rowDropable: true,
                                cellResize:true,
                                cellRearrange:true,
                                sortable:true
                            },{

                            },"watchlist_0");
                            watchlistWidget.init();
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>